<template>
  <div class="container">
    <div class="header">
      <div class="logo_img">
        <img src="../assets/home.jpg" alt="" />
      </div>
      <div class="tabBar">
        <div
          class="tabBarItem"
          :class="activeTab == index ? 'active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
          v-show="activeTab == index || showTabBar"
          @click="scrollTo(index)"
        >
          <div class="name" :class="activeTab == index ? 'active' : ''">
            {{ item.name }}
          </div>
          <div class="english" :class="activeTab == index ? 'active' : ''">
            {{ item.english }}
          </div>
        </div>
        <img
          class="icon"
          :class="showTabBar ? 'scroll' : ''"
          @click="showTabBar = !showTabBar"
          src="../assets/mindex.png"
          alt=""
        />
      </div>
    </div>
    <div style="">
      <div class="banner-wrapper">
        <el-carousel autoplay style="height: 100%">
          <el-carousel-item
            v-for="item in apiData.bsHomeMsgList"
            :key="item.id"
          >
            <el-image class="banner-image" :src="item.homeView" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="content-wrapper">
        <div class="about-wrapper" id="active1">
          <div class="about-title">
            <el-image :src="require('../assets/img.png')" />
            <div class="about-title-content">关于我们 <span>ABOUTS</span></div>
          </div>
          <div class="about-content">
            <div class="about-content-img">
              <el-image
                style="height: 100%; width: 100%; border-radius: 12px"
                :src="apiData.synopsisImg"
                fit="fill"
              />
            </div>
            <span class="about-content-info">
              {{ apiData.synopsis }}
            </span>
          </div>
        </div>

        <div class="expert-wrapper" id="active2">
          <div class="expert-title">
            <el-image :src="require('../assets/img_3.png')" />
            <div class="expert-title-content">
              国内专家 <span>EXPERT TEAM</span>
            </div>
          </div>
          <div class="expert-content">
            <div
              class="expert-content-item"
              v-for="item in apiData.bsExpertList"
              :key="item.id"
              style="border-radius: 12px"
              @click="toPaperDetail(item.expertName, item.introduceMsg)"
            >
              <div class="expert-img">
                <el-image
                  style="height: 100%; width: 100%"
                  :src="item.thumbnail"
                  fit="fill"
                />
              </div>
              <div class="expert-name">
                {{ item.expertName }}
              </div>
              <div class="expert-level">
                {{ item.expertPost }}
              </div>
              <div class="expert-desc">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>

        <div class="partner-wrapper" id="active3">
          <div class="partner-title" style="position: relative">
            <el-image :src="require('../assets/img_1.png')" />
            <div class="partner-title-content">
              协同网点 <span>PARTNER</span>
              <div
                style="
                  position: absolute;
                  right: 10px;
                  font-size: 14px;
                  font-weight: normal;
                  cursor: pointer;
                "
                @click="toPaperDetail('', '', true)"
              >
                查看更多
              </div>
            </div>
          </div>
          <div class="partner-content">
            <el-carousel class="partner-content-item" style="height: 100%">
              <el-carousel-item
                v-for="item in apiData.bsOrganizationList.length > 10
                  ? apiData.bsOrganizationList.slice(0, 10)
                  : apiData.bsOrganizationList"
                :key="item.id"
                @click="toPaperDetail(item.organizationName, item.introduceMsg)"
              >
                <div class="partner-image">
                  <el-image
                    style="height: 100%; width: 100%; border-radius: 12px"
                    fit="fill"
                    :src="item.thumbnail"
                  />
                </div>
                <div>
                  <div class="partner-name">
                    {{ item.organizationName }}
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>

        <div class="fruit-wrapper" id="active4">
          <div class="fruit-title">
            <el-image :src="require('../assets/img_2.png')" />
            <div class="fruit-title-content">研发成果 <span>FRUIT</span></div>
          </div>
          <div class="fruit-content">
            <div
              class="fruit-content-item"
              v-for="item in apiData.bsAchievementList"
              :key="item.id"
              @click="toPaperDetail(item.achievementName, item.introduceMsg)"
            >
              <div class="fruit-img">
                <el-image
                  style="height: 100%; width: 100%;border-radius: 12px"
                  :src="item.thumbnail"
                  fit="fill"
                />
              </div>
              <div class="fruit-name">
                {{ item.remark }}
              </div>
            </div>
          </div>
        </div>

        <div class="paper-wrapper">
          <div class="paper-title">
            <el-image :src="require('../assets/img_1.png')" />
            <div class="paper-title-content">学术论文 <span>PAPER</span></div>
          </div>
          <div class="paper-content">
            <div
              class="paper-content-item"
              @click="toPaperDetail(item.thesisTitle, item.content)"
              v-for="item in apiData.bsThesisList"
              :key="item.id"
            >
              <div class="paper-content-img">
                <el-image
                  style="width: 100%; height: 100%;border-radius: 12px"
                  fit="fill"
                  :src="item.thumbnail"
                />
              </div>
              <div class="paper-content-info">
                <div class="paper-content-title">
                  {{ item.thesisTitle }}
                </div>
                <div class="paper-content-date">
                  {{ item.updateTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer">
        <div class="footer-about">
          <div>关于我们</div>
          <div class="footer-about-content">
            <div style="margin-bottom: 24px">
              <div class="footer-about-content-title">地址</div>
              <div class="footer-about-content-name">
                广州市荔湾区荔湾路幸福新村福儿路1号
              </div>
            </div>
            <div style="margin-bottom: 24px">
              <div class="footer-about-content-title">电话</div>
              <div class="footer-about-content-name">
                (020)2552-8568/(020)2655-8889
              </div>
            </div>
            <div style="margin-bottom: 24px">
              <div class="footer-about-content-title">工作时间</div>
              <div class="footer-about-content-name">
                工作日 早上8:30-下午6:00 周六 早上8:30-中午12:00
              </div>
            </div>
          </div>
        </div>
        <div class="footer-copyright">
          版权所有中国中医耳鼻喉研究院 未经允许 请勿转载 粤ICP备O088888802号
        </div>
      </div>

      <!--      <div class="search-wrapper">-->
      <!--        <div class="search-input-wrapper">-->
      <!--          <el-input v-bind="searchForm.keyword" placeholder="请输入关键字" />-->
      <!--          <div class="btn-search">搜索</div>-->
      <!--        </div>-->

      <!--        <div class="search-link-wrapper">-->
      <!--          <div>-->
      <!--            <div class="search-link-title">24小时免费联系电话</div>-->
      <!--            <div class="search-link-phone">18605330195</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import Axios from "axios"

export default {
  name: "Index",
  data() {
    return {
      searchForm: {
        keyword: "",
      },
      showTabBar: false,
      tabList: [
        { name: "首页", english: "HOME" },
        { name: "院方概况", english: "OVERVIEW" },
        { name: "专家介绍", english: "EXPERT" },
        { name: "协同网点", english: "PARTNER" },
        { name: "研发成果", english: "RESEARCH" },
        { name: "学术论文", english: "PAPER" },
      ],
      activeTab: 0,
      apiData: {
        bsHomeMsgList: [],
        bsExpertList: [],
        bsOrganizationList: [],
        bsAchievementList: [],
        bsThesisList: [],
        synopsis: "",
        synopsisImg: "",
      },
    }
  },
  created() {
    Axios.get("http://admin.zgzyebh120.com/api/system/website/get")
      .then((res) => {
        this.apiData = res.data.data
        console.log(this.apiData)
      })
      .catch((error) => {
        console.log(error)
      })
  },
  methods: {
    scrollTo(index) {
      this.activeTab = index
      document.querySelector("#active" + index).scrollIntoView()
      this.showTabBar = false
    },
    /*  toPaperDetail(content) {
      console.log(content)
    }, */
    toPaperDetail(title, content, isList) {
      // console.log(content)

      if (isList) {
        this.$router.push({
          name: "mIndexContentDetail",
          params: {
            isList: true,
            content: content,
          },
        })
      } else {
        this.$router.push({
          name: "mIndexContentDetail",
          params: {
            content: content,
          },
        })
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  display flex
  flex-direction column
  justify-content center
  position relative
  .header
    position fixed
    top 0
    background #fff
    z-index 8
    display flex
    height 60px
    width 100%
    // align-items center
    padding 0 18px
    justify-content space-between
    .logo_img
      width 130px
      img
        width 100%
        margin-top 10px
    .tabBar
      display flex
      align-items center
      flex-direction column
      margin-right 10px
      position relative
      // height 124px
      .icon
        width 20px
        height 20px
        position absolute
        right 18px
        top 15px
      .scroll
        transform: rotate(180deg);
      .tabBarItem
        text-decoration none
        background rgba(255,255,255,.5)
        position relative
        display flex
        height 60px
        width 140px
        flex-shrink 0
        box-sizing border-box
        font-size 12px
        align-items center
        flex-direction column
        justify-content center
        padding 6px
        cursor pointer
        .name
          margin-bottom 10px
          color #1d1d1d
        .english
          color #9f9f9f
      .active.tabBarItem::after
        //  background #3fb6e0
        content ''
        width 20px
        height 3px
        background #3fb6e0
        position absolute
        bottom 0
        left 50%
        transform translateX(-50%)
      .active.tabBarItem
        .name.active
          // color #fff
        .english.active
          // color #fff
  .banner-wrapper
    padding-top 60px
    /deep/.el-carousel__container
      height 200px
    .banner-image
      height 100%
      width 100%
      object-fit cover
  .content-wrapper
    // width 70%
    padding 18px
    margin 0 auto
    margin-top 20px
    .about-wrapper
      background-color #ffffff
      .about-title
        // height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        // padding-left 0.5rem
        .about-title-content
          display flex
          flex-direction row
          align-items center
          font-size 14px
          font-weight bold
          // margin-left .5rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .about-content
        display flex
        flex-direction row
        align-items center
        margin-top 1rem
        .about-content-img
          width 40%
          height 140px
        .about-content-info
          width 60%
          // text-indent 1.6rem
          // letter-spacing 0.1rem
          // line-height 1.5rem
          // padding 2rem
          padding-left 18px
          font-size 12px
          line-height 24px
          text-overflow -o-ellipsis-lastline
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 4
          line-clamp 4
          -webkit-box-orient vertical
    .expert-wrapper
      background-color #ffffff
      margin-top 2rem
      .expert-title
        // height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        // padding-left .5rem
        .expert-title-content
          display flex
          flex-direction row
          align-items center
          font-size 14px
          font-weight bold
          // margin-left .5rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .expert-content
        display flex
        flex-direction column
        justify-content space-between
        flex-wrap wrap
        margin-top 18px
        // padding 18px
        .expert-content-item
          &:hover {
            border 5px solid rgb(234, 248,251)
          }
          box-sizing border-box
          cursor pointer
          display flex
          flex-direction column
          align-items center
          width 100%
          border 5px solid transparent
          box-shadow 0 0 1px 1px #f6f6f6
          margin-bottom 18px
          .expert-img
            height 8rem
            width 8rem
            margin-top .4rem
            /deep/img
              border-radius 4rem
              border 1px solid rgb(108, 199, 231)
              box-sizing border-box
              object-fit cover
          .expert-name
            margin-top 0.8rem
            font-size 0.5rem
          .expert-level
            margin-top 0.5rem
            font-size 0.3rem
            color rgb(108, 199, 231)
          .expert-desc
            margin-top 0.8rem
            letter-spacing 0.2rem
            text-indent 1rem
            line-height 24px
            text-align justify
            font-size 0.5rem
            margin-left 0.4rem
            margin-right 0.4rem
            margin-bottom .4rem
            text-overflow -o-ellipsis-lastline
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 8
            line-clamp 8
            -webkit-box-orient vertical
    .partner-wrapper
      background-color #ffffff
      margin-top 18px
      .partner-title
        // height 3rem
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        padding-left .5rem
        .partner-title-content
          display flex
          flex-direction row
          align-items center
          font-size 14px
          font-weight bold
          margin-left .5rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .partner-content
        display flex
        flex-direction row
        justify-content space-between
        flex-wrap wrap
        margin-top 1rem
        width 100%
        .partner-content-item
          //&:hover {
          //  border 5px solid rgb(234, 248,251)
          //}
          width 100%
          cursor pointer
          display flex
          flex-direction column
          align-items center
          //box-shadow 0 0 2px 2px #f6f6f6
          //width 18%
          //border 5px solid transparent
          /deep/.el-carousel__container
            width 100%
            height 300px
            .partner-image
              width 100%
              height 256px
            .partner-name
              padding-top .8rem
              font-size 1rem
    .fruit-wrapper
      background-color #ffffff
      margin-top 18px
      .fruit-title
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        padding-left .5rem
        .fruit-title-content
          display flex
          flex-direction row
          align-items center
          font-size 14px
          font-weight bold
          margin-left 1rem
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
      .fruit-content
        display flex
        flex-direction column
        justify-content space-between
        flex-wrap wrap
        margin-top 0.2rem
        .fruit-content-item
          &:hover {
            border 5px solid rgb(234, 248,251)
          }
          cursor pointer
          display flex
          flex-direction row
          justify-content center
          align-items center
          // box-shadow 0 0 1px 1px #f6f6f6
          margin-top 16px
          width 100%
          // border 5px solid transparent
          .fruit-img
            width 40%
            height 140px
          .fruit-name
            width 60%
            padding-left 18px
            font-size 12px
            line-height 24px
            text-overflow -o-ellipsis-lastline
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 4
            line-clamp 4
            -webkit-box-orient vertical
    .paper-wrapper
      background-color #ffffff
      margin-top 18px
      .paper-title
        background-color rgb(234, 248,251)
        color rgb(26, 148, 190)
        display flex
        flex-direction row
        align-items center
        .paper-title-content
          display flex
          flex-direction row
          align-items center
          font-size 14px
          font-weight bold
          span
            font-size 0.8rem
            align-self flex-end
            margin-left .5rem
    .paper-content
      display flex
      flex-direction column
      justify-content space-between
      flex-wrap wrap
      margin-top 0.2rem
      .paper-content-item
        &:hover {
          border 5px solid rgb(234, 248,251)
        }
        cursor pointer
        display flex
        flex-direction row
        align-items center
        // box-shadow 0 0 1px 1px #f6f6f6
        margin-top 18px
        width 100%
        // border 5px solid transparent
        .paper-content-img
          width 50%
          height 140px
        .paper-content-info
          width 50%
          ont-size 0.8rem
          // text-indent 1.6rem
          // letter-spacing 0.1rem
          // line-height 1.2rem
          text-align justify
          padding-left 18px
          .paper-content-title
            font-size 1rem
          .paper-content-date
            font-size 0.5rem
            margin-top 1rem
            color gray
  .footer
    margin-top 18px
    // height 450px
    background-color rgb(64, 89, 102)
    .footer-about
      // height 11rem
      // width 100%
      padding 18px 18px 0
      margin 0 auto
      font-size 12px
      color #ffffff
      display flex
      flex-direction column
      justify-content center
      .footer-about-content
        margin 24px 18px 0px
        display flex
        flex-direction column
        justify-content space-between
        padding-left 5px
        padding-right 5px
        .footer-about-content-title
          font-size 10px
        .footer-about-content-name
          margin-top 10px
          font-size 10px
    .footer-copyright
      height 30px
      line-height 30px
      text-align center
      background-color rgb(35, 53, 77)
      color rgb(132, 148, 164)
      font-size 12px
  .search-wrapper
    width 70%
    height 6rem
    z-index 6
    background-color #ffffff
    box-shadow 0 0 1px 1px #f6f6f6
    position absolute
    top 33rem
    left 15%
    display flex
    flex-direction row
    justify-content center
    align-items center
    .search-input-wrapper
      height 2.5rem
      width 30rem
      background-color rgb(127,206,247)
      display flex
      flex-direction row
      justify-content center
      align-items center
      /deep/.el-input__inner
        height 2rem
        line-height 2rem
        margin-left 0.2rem
        color #000000
      .btn-search
        width 6rem
        color #ffffff
        text-align center
    .search-link-wrapper
      margin-left 10rem
      .search-link-title
        color rgb(167,167,167)
        font-size 0.8rem
      .search-link-phone
        margin-top .5rem
        color rgb(127,206,247)
        font-size 1.2rem
        font-weight bold
</style>
